<template>
  <layout class="news-center-page">
    <Row type="flex"
         justify="space-between"
         class="row-operation">
      <Col span="12">
      <div class="search-box">
        <Input @on-change="handleClear"
               clearable
               placeholder="输入关键字搜索"
               class="search-input"
               v-model="searchValue" />
        <DatePicker type="datetime"
                    class="date-picker"
                    placeholder="发布时间"></DatePicker>
        <Button @click="handleSearch"
                class="search-btn"
                type="primary"
                icon="md-search">
          搜索</Button>
      </div>
      </Col>
      <Col span="8"
           class="col-right">
      <Poptip confirm
              title="确定删除？"
              @on-ok="okdelete">
        <Button icon="md-trash"
                type="error">删除</Button>
      </Poptip>
      </Col>
    </Row>
    <table-page :columns1="columns1"
                :data1="data1"
                :noData="noData"
                :currentPage="currentPage"
                :totalPage="totalPage"
                :pageSize="pageSize"
                :pageSizeOpts="pageSizeOpts"
                @multi-select="multiSelect"
                @change-page="changePage"
                @change-page-size="changPageSize">
    </table-page>
    <news-content ref="modify"></news-content>
  </layout>
</template>

<script>
import newsContent from './content/content.vue'
import tablePage from '_c/table-page/table-page.vue'

export default {
  name: 'news-center',
  components: {
    newsContent,
    tablePage
  },
  data () {
    return {
      exportLoading: false,
      searchValue: '',
      columns1: [
        {
          type: 'selection',
          width: 60,
          align: 'center'
        },
        {
          type: 'index',
          width: 60,
          align: 'center'
        },
        {
          title: '发布时间',
          key: 'releasetime'
        },
        {
          title: '消息内容',
          key: 'newscontent',
          tooltip: true,
          align: 'center'
        },
        {
          title: '操作',
          key: 'handle',
          width: 80,
          align: 'center',
          render: (h, params) => {
            return h('div', [
              h('Button', {
                props: {
                  type: 'primary',
                  size: 'small'
                },
                on: {
                  click: () => {
                    this.$refs.modify.getItem(params.row)
                  }
                }
              }, '修改')
            ])
          }
        }
      ],
      data1: [],
      noData: '暂无数据',
      currentPage: 1,
      totalPage: 0,
      pageSize: 5,
      pageSizeOpts: [5, 10, 15, 20],
      tableData: [],
      info: [
        {
          'id': 1,
          'releasetime': '2018-9-15 14:42:30',
          'newscontent': '奖赚APP上线啦~~~1'
        },
        {
          'id': 2,
          'releasetime': '2018-9-16 14:42:30',
          'newscontent': '奖赚APP上线啦~~~2'
        },
        {
          'id': 3,
          'releasetime': '2018-9-16 14:42:30',
          'newscontent': '奖赚APP上线啦~~~3'
        },
        {
          'id': 4,
          'releasetime': '2018-9-16 14:42:30',
          'newscontent': '奖赚APP上线啦~~~4'
        },
        {
          'id': 5,
          'releasetime': '2018-9-16 14:42:30',
          'newscontent': '奖赚APP上线啦~~~5'
        },
        {
          'id': 6,
          'releasetime': '2018-9-16 14:42:30',
          'newscontent': '奖赚APP上线啦~~~6'
        },
        {
          'id': 7,
          'releasetime': '2018-9-16 14:42:30',
          'newscontent': '奖赚APP上线啦~~~7'
        },
        {
          'id': 8,
          'releasetime': '2018-9-16 14:42:30',
          'newscontent': '奖赚APP上线啦~~~8'
        }
      ],
      selectedIds: []
    }
  },
  mounted () {
    this.getTableData()
  },
  methods: {
    // 获取表格数据信息
    getTableData () {
      // 保存取到的所有数据
      this.tableData = this.info
      this.totalPage = this.info.length
      // 初始化显示，小于每页显示条数，全显，大于每页显示条数，取前每页条数显示
      if (this.info.length < this.pageSize) {
        this.data1 = this.tableData
      } else {
        var _start = (this.currentPage - 1) * this.pageSize
        var _end = this.currentPage * this.pageSize
        this.data1 = this.tableData.slice(_start, _end)
      }
    },
    // 页码切换
    changePage (page) {
      this.currentPage = page
      this.getTableData()
    },
    // 切换每页显示多少条数据
    changPageSize (pageSize) {
      this.searchValue = '' // 清空搜索框内容
      this.pageSize = pageSize
      this.getTableData()
    },
    handleClear (e) {
      if (e.target.value === '') this.getTableData()
    },
    handleSearch () {
      if (this.searchValue !== '') {
        this.data1 = this.tableData.filter(item => item.content.indexOf(this.searchValue) > -1)
        this.totalPage = this.data1.length
      }
    },
    // 多选
    multiSelect (selection) {
      this.selectedIds = selection.map(item => item.id)
    },
    okdelete () {
      if (this.selectedIds.length === 0) {
        this.$Message.info('请选择要删除的用户！')
      } else {
        this.$Message.info(`您删除了${this.selectedIds}这些用户！`)
      }
    }
  }
}
</script>

<style lang="less" scoped>
.news-center-page {
  padding: 20px;
  background-color: #fff;
  .row-operation {
    margin-bottom: 20px;
    .search-box {
      .search-input {
        width: 200px;
      }
      .date-picker {
        margin-left: 5px;
      }
      .search-btn {
        margin-left: 5px;
      }
    }
    .col-right {
      text-align: right;
    }
  }
}
.feedback-content {
  color: #2d8cf0;
  cursor: pointer;
}
</style>
